@use "src/styles/variables" as *;

.vm-download-report {
  display: grid;
  gap: $padding-large;
  padding-top: calc($padding-large - $padding-global);
  width: 700px;
  max-width: 100%;

  &-settings {
    display: grid;
    gap: $padding-large;

    &__title {
      display: flex;
      align-items: center;
      margin-right: $padding-global;
      font-size: $font-size;
      font-weight: 600;
      white-space: nowrap;
    }
  }

  &__buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: $padding-global;
  }

  &-helper {
    display: grid;
    gap: $padding-small;
    padding: $padding-global;

    &__description {
      max-width: 400px;
      white-space: pre-line;
      line-height: 1.3;

      p {
        margin-bottom: calc($padding-small / 2);
      }
    }

    &__buttons {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: $padding-small;
    }
  }
}
